<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>SVG Lab1</title>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<link rel="icon" href="gatherhub-logo.png">
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link rel="stylesheet" href="svglab1.css">
		<!--<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>-->
		<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
		<script src="jquery.min.js"></script>
		<script src="svglab1.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	</head>
    <body>
	<div>
		<div id="hubInfo" class="modal modal-dialog modal-sm fade">
			<span class="header-sm">Join Hub</span><br>
			Server:	<input clase="form-control input-sm" id="svrAddr" type="text" size="20"/><br>
			Hud ID:	<input clase="form-control input-sm" id="hubId" type="text" size="20"/><br>
			Peer Name: <input clase="form-control input-sm" id="peerName" type="text" size="20"/><br>
			<button id="btnOK" class="btn-default btn-sm" data-dismiss="modal" onclick="connectSvr('go')"><span class="glyphicon glyphicon-ok green"></span></button>
			<button class="btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove red"></span></button>
		</div>
		<div id="touchCursor">
			<img id="curImg" src="marker_black_1.png"/>
		</div>
		<div class="light-border">
			<svg id="sketchCanvas"><g id="paths"></g></svg>
		</div>
		<div id="visualBoard">
			<span id="vispadSizeH"></span>
			<span id="vispadSizeW"></span>
			<svg id="visualCanvas">
				<use xlink:href="#paths"/>
			</svg>
		</div>
		<div id="toolbar" class="container">
		<div class="btn-group col-sm-*">
			<button class="btn-default btn-sm" onclick="setPenColor('black')"><span class="glyphicon glyphicon-pencil black"></span></button>
			<button class="btn-default btn-sm" onclick="setPenColor('red')"><span class="glyphicon glyphicon-pencil red"></span></button>
			<button class="btn-default btn-sm" onclick="setPenColor('green')"><span class="glyphicon glyphicon-pencil green"></button>
			<button class="btn-default btn-sm" onclick="setPenColor('blue')"><span class="glyphicon glyphicon-pencil blue"></button>
			<button class="btn-default btn-sm" onclick="setPenColor('white')"><span class="glyphicon glyphicon-erase grey"></button>
			<button class="btn-default btn-sm" onclick="setPenWidth(1)">极细</button>
			<button class="btn-default btn-sm" onclick="setPenWidth(5)">细</button>
			<button class="btn-default btn-sm" onclick="setPenWidth(9)">中</button>
			<button class="btn-default btn-sm" onclick="setPenWidth(21)">粗</button>
			<!--<button class="btn-default btn-sm" onclick="setPenShape('rect')">方</button>
			<button class="btn-default btn-sm" onclick="setPenShape('round')">圆</button>-->
			<button class="btn-default btn-sm" onclick="drawpadSizeup(false)"><span class="glyphicon glyphicon-zoom-out grey"></button>
			<button class="btn-default btn-sm" onclick="drawpadSizeup(true)"><span class="glyphicon glyphicon-zoom-in grey"></button>
			<button class="btn-default btn-sm" id="btnUndo" onclick="undo()" disabled><span class="glyphicon glyphicon-backward grey"></button>
			<button class="btn-default btn-sm" id="btnRedo" onclick="redo()" disabled><span class="glyphicon glyphicon-forward grey"></button>
			<button class="btn-default btn-sm" onclick="resetDrawpad()"><span class="glyphicon glyphicon-screenshot grey"></button>
			<button class="btn-default btn-sm" onclick="clearDrawpad('ops')"><span class="glyphicon glyphicon-refresh grey"></button>
			<button class="btn-default btn-sm" id="btnConn" data-toggle="modal" data-target="#hubInfo" data-keyboard="true" onclick="connectSvr('set')"><span class="glyphicon glyphicon-log-in grey"></button>
			<button class="btn-default btn-sm" id="btnDisconn" onclick="connectSvr('disconn')"><span class="glyphicon glyphicon-log-out grey"></button>
		</div>
		<div id="msgSect" class="col-sm-*">
			<span id="msgHead"></span>
			<input class="input-md" id="txtMsg" type="text" size="25"/>
			<button class="btn-default btn-xs" onclick="sendMsg()"><span class="glyphicon glyphicon-send blue"></button>
		</div>
		</div>
	</div>
    </body>
</html>